import React, { FC, useContext, useState } from 'react';
import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { ActivitiesContext, useActivitiesExhibitionList } from '@/pages/MyActivities/MyActivitiesContext';
import ProductImg from '@/pages/components/ProductImg/ProductImg';
export interface IProps extends ICompProps {}
SlideBanner.defaultProps = {} as Partial<IProps>;
function SlideBanner(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('SlideBanner', className);
    const { activitiesExhibitionState } = useActivitiesExhibitionList();
    let [currentIndex, setCurrentIndex] = useState(0);
    const handelChange = (e) => {
        setCurrentIndex(e.detail.current);
    };
    return (
        <RootView className={localClassName}>
            <Swiper
                className="swiperbanner"
                style={style}
                current={currentIndex}
                // circular //不可使用循环,循环,有一个BUG,第一次,第一张图,不可用.
                // indicatorDots//隐藏原来的点
                onChange={handelChange}
                autoplay>
                {activitiesExhibitionState.activitiesList.map((product, index) => (
                    <SwiperItem
                        className="BannerItem"
                        key={product.id}
                        onClick={() => {
                            /* activitiesExhibitionState.gotoPageDetail(product.id)*/
                        }}>
                        <ProductImg src={product.imgUrl}></ProductImg>
                    </SwiperItem>
                ))}
            </Swiper>
            <View className="spot-pagination">
                {activitiesExhibitionState.bannerList.map((item, index) => (
                    <View
                        key={index}
                        className={
                            'spot-pagination-bullet ' + (currentIndex == index ? 'spot-pagination-bullet-active' : '')
                        }></View>
                ))}
            </View>
        </RootView>
    );
}
export default React.memo(SlideBanner as FC<IProps>);

const RootView = (() => {
    const height = '280px';
    const width = '690px;';
    return styled(View)`
        &.SlideBanner {
            position: relative;
            margin: 0 auto;
            margin-top: 48px;
            .swiperbanner {
                height: ${height};
                width: ${width};
                border-radius: 16px;
                overflow: hidden;
                margin: 0 auto;
                .BannerItem {
                    width: ${width};
                    height: ${height};
                }
            }
            // 指示点样式
            .spot-pagination {
                position: absolute;
                bottom: 16px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                justify-content: center;
                z-index: 999;
                border-radius: 3px;
                background-color: rgba(255, 255, 255, 0.3);
                .spot-pagination-bullet {
                    /* margin-right: 5px; */
                    /* border-radius: 20%; */
                    height: 6px;
                    width: 16px;
                    border-radius: 3px;
                }
                // 当前指示点样式
                .spot-pagination-bullet-active {
                    background: #fff;
                }
            }
        }
    `;
})();
